<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #545c64 ;border-style: groove;border-width: 2px;height: 90px;">
         <el-row>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple" style="margin-top: 20px;">
              <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="50" style="float: left;"/><h2 style="float: left;margin-top: 10px;color: white;">...系统</h2>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple-light" />
          </el-col>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple" >
              <el-card style="width: 400px;margin-top: 10px;float: left;" shadow="always" >
                用户名：
                <span style="font-size: 15px;margin-right: 5px;color: red;">{{ useinfo.UserInfo.UserName }}</span>
                角色：
                <span style="font-size: 15px;color: blueviolet;">{{ useinfo.UserInfo.RoleName }}</span>
                
              </el-card>
              <el-button style="float: right;margin-top: 25px;" type="info" :icon="SwitchButton" @click="tui" circle />
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="210px" style="border-style: groove;border-width: 2px;height: 750px;">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="false">展开</el-radio-button>
          <el-radio-button :value="true">关闭</el-radio-button>
        </el-radio-group>
        <el-menu
          :default-active="route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          
          <el-menu-item index="/UserList">
            <el-icon><icon-menu /></el-icon>
            <template #title>用户信息管理</template>
          </el-menu-item>
          <el-menu-item index="/RoleListView">
            <el-icon><document /></el-icon>
            <template #title>用户角色管理</template>
          </el-menu-item>
          <el-menu-item index="/MenuDeviceView">
            <el-icon><el-icon><Memo /></el-icon></el-icon>
            <template #title>菜单管理</template>
          </el-menu-item>
          <el-menu-item index="/RoleMenuView">
            <el-icon><el-icon><Memo /></el-icon></el-icon>
            <template #title>角色分配菜单管理</template>
          </el-menu-item>
          <el-menu-item index="/ExcusedListView">
            <el-icon><el-icon><EditPen /></el-icon></el-icon>
            <template #title>请假管理</template>
          </el-menu-item>
          <el-menu-item index="/DialogView">
            <el-icon><el-icon><EditPen /></el-icon></el-icon>
            <template #title>关于对话框的表单验证</template>
          </el-menu-item>
        </el-menu>
        </el-aside>
        <el-main style="border-style: groove;border-width: 2px;height: 750px;">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


  


<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  SwitchButton,
  EditPen,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import{useCounterStore} from '@/stores/counter'
const useinfo=useCounterStore();
const route=useRoute()
const router=useRouter()
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const tui=()=>{
  router.push({
    path:'/'
  })
}

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
